<template>
  <Header/>
  <a-flex horizontal gap="middle"  justify="center" align="center" style="margin-top: 110px">
    <div style="width: 35%; padding: 1rem">
      <a-carousel autoplay>
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
        <div><h3>4</h3></div>
      </a-carousel>
    </div>
    <div style="width: 65%; padding: 1rem">
      <a-skeleton active v-if="recommendLoading" />
      <a-flex v-if="recommendList.length > 0" wrap="wrap" gap="small">
        <a-card hoverable style="width: 300px;text-align: left" v-for="item in recommendList" @click="clickVideo(item.videoId)">
          <template #cover>
            <img
                alt="example"
                :src="item.coverPicture"
            />
          </template>
          <a-card-meta :title="item.title" :description="`${item.nickname} · ${formatISODate(item.publishTime)}`">
            <template #avatar>
              <a-avatar :src="item.header" />
            </template>
          </a-card-meta>
        </a-card>
        <div style="margin: 10px">
          <a-flex vertical horizontal gap="middle">
            <div>
              <icon :style="{ fontSize: '32px' }" @click="change">
                <template #component>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-repeat" viewBox="0 0 16 16">
                    <path style="color: black" d="M11 5.466V4H5a4 4 0 0 0-3.584 5.777.5.5 0 1 1-.896.446A5 5 0 0 1 5 3h6V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192Zm3.81.086a.5.5 0 0 1 .67.225A5 5 0 0 1 11 13H5v1.466a.25.25 0 0 1-.41.192l-2.36-1.966a.25.25 0 0 1 0-.384l2.36-1.966a.25.25 0 0 1 .41.192V12h6a4 4 0 0 0 3.585-5.777.5.5 0 0 1 .225-.67Z"/>
                  </svg>
                </template>
              </icon>
            </div>
          </a-flex>
        </div>

      </a-flex>
    </div>
  </a-flex>
  <a-flex wrap="wrap" gap="middle" justify="center" align="center" style="margin: 32px">
    <a-card hoverable style="width: 300px" v-for="item in videoList" @click="clickVideo">
      <template #cover>
        <img
            alt="example"
            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
        />
      </template>
      <a-card-meta title="Card title cscscv fsfewe wefew十四oh我撒吃撒" description="This is the description">
        <template #avatar>
          <a-avatar src="https://joeschmoe.io/api/v1/random" />
        </template>
      </a-card-meta>
    </a-card>
    <a-skeleton active v-if="isLoading"/>
  </a-flex>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount, onBeforeMount} from 'vue'
import Header from "@/components/common/TopBar.vue";
import Icon from "@ant-design/icons-vue";
import router from "@/router/index.js";
import {recommendVideo} from '@/api/VideoRequest.js'
import {message} from "ant-design-vue";
import {formatISODate} from "@/utils/timeUtil.js"

defineProps({
  msg: String,
})

const recommendList = ref([]); // 推荐视频列表(根据用户喜好推荐3个)
const videoList = ref(Array(24)); // 视频列表(下拉就刷新)
const isLoading = ref(false); // 是否正在加载更多数据
const pageSize = ref(8); // 每次刷新进videoList多少数据
const pageIndex = ref(1); // 当前页码
const recommendLoading = ref(false);//推荐加载状态

const handleScroll = async () => {
  const scrollPosition = Math.floor(document.documentElement.scrollTop);
  const windowHeight = window.innerHeight;
  const scrollHeight = document.documentElement.scrollHeight;
  if (scrollPosition + windowHeight >= scrollHeight - 50) {
    if(!isLoading.value) {
      console.log('滚动到底了，开始请求数据')
      await loadMoreData();
      console.log(`当前页码: ${pageIndex.value}`)
      console.log('当前数据', videoList.value)
    }

  }
};

/**
 * 刷新 recommendList 列表
 */
function change() {
  recommend();
}

/**
 * videoList 加载更多数据
 */
async function loadMoreData() {
  isLoading.value = true;
  await new Promise(resolve => {
    pageIndex.value++;
    videoList.value = videoList.value.concat(Array(pageSize.value)); // 模拟请求数据
    setTimeout(resolve, 3000)
  }); // 假设需要 2 秒
  isLoading.value = false;
}

function clickVideo(videoId = '669e1302981a375788192878') {
  router.push({ name: 'playVideo', params: {videoId} })
}

function recommend() {
  recommendList.value = [];
  recommendLoading.value = true;
  recommendVideo().then(res => {
    recommendLoading.value = false;
    if(res.code === 0) {
      recommendList.value = res.data;
    } else {
      message.error(res.msg)
    }
  })
}

onBeforeMount(_=>{
  localStorage.setItem("redirectPath", router.currentRoute.value.fullPath)
})

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  recommend();
});

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll);
});

</script>

<style scoped>
/* 走马灯样式 */
:deep(.slick-slide) {
  text-align: center;
  height: 320px;
  line-height: 320px;
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
  overflow: hidden;
}
:deep(.slick-slide h3) {
  color: #fff;
}

</style>
